var id = "";ml>
var surveyId = "";
var state = "";
    <meta charset="utf-8" />
layui.config({itle>
    base: basePath,../assets/lib/layui/css/layui.css" rel="stylesheet" />
    version: skyeyeVersionts/lib/winui/css/winui.css" rel="stylesheet" />
}).extend({
    window: 'js/winui.window'
}).define(['window', 'table', 'jquery', 'winui', 'form', 'laydate'], function (exports) {
    winui.renderColor();
    var $ = layui.$,
        form = layui.form;
    id = GetUrlParam("id");
    surveyId = GetUrlParam("surveyId");
    state = GetUrlParam("state");
    if (isNull(id)) {ttom: 20px;
        winui.window.msg("请传入适用对象信息", {icon: 2, time: 2000});
        return false;
    }   .schedule-title h2 {
            margin: 0;
    // 获取试卷信息并渲染-size: 24px;
    function getExamInfo() {
        AjaxPostUtil.request({
            url: schoolBasePath + "querySurveyAnswerById",
            params: { id: id },
            type: 'json',
            method: 'post',32px;
            callback: function (json) {
                var data = json.bean;
                // 渲染标题和学号 12px;
                if (data.surveyMation) {0, 0, 0, 0.06);
                    $("#examTitle").text(data.surveyMation.surveyName || '');
                }
                $("#studentId").text("学号：" + (data.studentNumber || ''));
        .question-item:hover {
                // 渲染题目列表anslateY(-2px);
                var html = '';20px rgba(0, 0, 0, 0.08);
                var questions = (data.surveyMation && data.surveyMation.questionMation) ? data.surveyMation.questionMation : [];
                questions.forEach(function(question, index) {
                    html += `
                    <div class="question-item">
                        <div class="question-header">
                            <div class="question-title-wrapper">
                                <div class="question-index">${index + 1}</div>
                                <span class="question-title">${question.quTitle}</span>
                                <span class="question-type">[${getQuestionTypeName(question.quType)}]</span>
                                <div class="question-score-badge">(${question.fraction}分)</div>
                            </div>
                            <div>
                                <span>评分</span>
                                <input type="number" class="layui-input score-input"
                                    data-question-id="${question.id}"
                                    min="0" max="${question.fraction}" step="0.1"
                                    value="${question.examSurveyQuAnswerFraction ? question.examSurveyQuAnswerFraction.fraction : ''}">
                            </div>
                        </div>
                        <div class="answer-section">
                            ${renderAnswerContent(question)}
                        </div>
                    </div>enter;
                    `;ntent: center;
                });und: #1890ff;
                document.getElementById('questionList').innerHTML = html;
            }order-radius: 50%;
        }); font-weight: 600;
    }       font-size: 16px;
        }
    // 获取题目类型名称
    function getQuestionTypeName(type) {
        var typeMap = {16px;
            1: '单选题',c3e50;
            2: '多选题',ht: 500;
            3: '填空题',
            4: '多项填空题',
            8: '评分题',e {
            9: '排序题',: 14px;
            11: '矩阵单选题',
            12: '矩阵填空题', 8px;
            13: '矩阵多选题',
            18: '矩阵评分题'
        };uestion-score-badge {
        return typeMap[type] || '未知类型';
    }       background: #fff0f0;
            color: #ff4d4f;
    // 渲染答案内容（重点：单选题高亮考生答案）12px;
    function renderAnswerContent(question) {
        var html = '<div class="answer-block student-answer">';
        html += '<div class="section-header"><span>考生答案</span></div>';
        
        if (question.quType === 1) { // 单选题
            var answers = question.radioAn || [];
            html += '<div class="option-group">';
            (question.radioTd || []).forEach(function(option) {
                var isSelected = answers.length > 0 && answers[0].quItemId === option.id;
                html += `
                    <div class="layui-unselect layui-form-radio${isSelected ? ' layui-form-radioed' : ''}" style="pointer-events:none;">ted ? ' layui-form-radioed' : ''}" style="pointer-events:none;">
                        <i class="layui-anim layui-icon">${isSelected ? '&#xe643;' : '&#xe63f;'}</i>#xe63f;'}</i>
                        <span>${option.optionName}</span>
                    </div>`;
            });gin-top: 12px;
            html += '</div>';
        } else if (question.quType === 2) { // 多选题
            var answers = question.checkboxAn || [];
            html += '<div class="option-group">';
            (question.checkboxTd || []).forEach(function(option) {
                var isSelected = answers.some(a => a.quItemId === option.id);
                html += `
                    <div class="layui-unselect layui-form-checkbox${isSelected ? ' layui-form-checked' : ''}" style="pointer-events:none;">lected ? ' layui-form-checked' : ''}" style="pointer-events:none;">
                        <i class="layui-icon">${isSelected ? '&#xe605;' : '&#xe625;'}</i>i>
                        <span>${option.optionName}</span>
                    </div>`;
            });
            html += '</div>';
        } else if (question.quType === 3) { // 填空题
            html += `<span class="fillblank-answer">${(question.fillblankAn || []).map(a => a.answer).join('、')}</span>`;
        } else if (question.quType === 4) { // 多项填空题
            (question.multifillblankTd || []).forEach(function(option) {
                html += ` {
                    <div class="fillblank-answer">
                        <span class="option-name">${option.optionName}: </span>
                        <span class="student-answer">${option.isDefaultAnswer || ''}</span>
                    </div>`;0%;
            });
        } else if (question.quType === 8) { // 评分题
            html += '<div class="score-answer">';
            (question.scoreTd || []).forEach(function(item, idx) {
                var score = (question.scoreAn && question.scoreAn[idx]) ? question.scoreAn[idx].answerScore : 0;
                html += `
                    <div>
                        <span>${idx + 1}. ${item.optionName}: </span>
                        <span>${score}分</span>
                    </div>`;
            });
            html += '</div>';
        } else if (question.quType === 9) { // 排序题
            html += '<div class="sort-answer">';
            (question.orderByTd || []).forEach(function(option, idx) {
                html += `<div><span>${idx + 1}. ${option.optionName}</span></div>`;
            });or: #2c3e50;
            html += '</div>';
        } else if ([11,12,13,18].includes(question.quType)) {
            html += renderMatrixTable(question);
        }   display: block;
            margin: 4px 0;
        // 媒体内容t-size: 14px;
        if (question.fileUrl) {
            html += '<div class="media-content">';
            if (question.fileType === 3) { // 图片
                html += `<img src="${getFileUrl(question.fileUrl)}" class="preview-image" style="max-width:200px;">`;
            } else if (question.fileType === 1) { // 视频
                html += `<video src="${getFileUrl(question.fileUrl)}" controls class="preview-video" style="max-width:300px;"></video>`;
            } else if (question.fileType === 2) { // 音频
                html += `<audio src="${getFileUrl(question.fileUrl)}" controls class="preview-audio"></audio>`;
            }
            html += '</div>';
        }total-score-container {
            display: flex;
        html += '</div>';n: column;
        return html;ems: center;
    }       padding: 20px;
            background: #f5f5f5;
    // 渲染矩阵题表格rder: 1px solid #eaeaea;
    function renderMatrixTable(question) {
        var html = '<table class="layui-table" lay-size="sm">';
        html += '<thead><tr><th>行\\列</th>';
        (question.columnTd || []).forEach(function(col) {
            html += `<th>${col.optionName}</th>`;
        });tal-score-container .schedule-title {
        html += '</tr></thead><tbody>';
        (question.rowTd || []).forEach(function(row) {
            html += `<tr><td>${row.optionName}</td>`;
            (question.columnTd || []).forEach(function(col) {
                var cellContent = '';
                if (question.quType === 18) { // 矩阵评分题
                    var answer = (question.chenScoreAn || []).find(a => a.quRowId === row.id && a.quColId === col.id);
                    cellContent = answer ? (answer.answerScore + '分') : '';
                } else if (question.quType === 12) { // 矩阵填空题
                    var answer = (question.chenFbkAn || []).find(a => a.quRowId === row.id && a.quColId === col.id);
                    cellContent = answer ? answer.answerValue : '';
                } else if (question.quType === 11) { // 矩阵单选题
                    var answer = (question.chenRadioAn || []).find(a => a.quRowId === row.id && a.quColId === col.id);
                    cellContent = answer ? '●' : '';
                } else if (question.quType === 13) { // 矩阵多选题
                    var answer = (question.chenCheckboxAn || []).find(a => a.quRowId === row.id && a.quColId === col.id);
                    cellContent = answer ? '■' : '';
                }
                html += `<td>${cellContent}</td>`;
            });t-size: 20px;
            html += '</tr>';
        });
        html += '</tbody></table>';
        return html;
    }       font-size: 20px;
            color: #666;
    // 获取文件完整URL-weight: 500;
    function getFileUrl(fileUrl) {
        if (window.$config && window.$config.getConfig) {
            return window.$config.getConfig().fileBasePath + fileUrl;
        }   margin: 16px 0;
        return fileUrl;
    }   
        .preview-image {
    // 评分输入事件ax-width: 300px;
    $(document).on('change', '.score-input', function () {
        handleScoreChange(this);
    });     transition: all 0.3s;
        }
    // 分数变化处理
    function handleScoreChange(input) {
        var questionId = $(input).data('question-id');;
        var score = parseFloat($(input).val());
        var maxScore = parseFloat($(input).attr('max'));
        .preview-video,
        if (isNaN(score) || score < 0) {
            $(input).val(0);
            score = 0;ius: 4px;
        }
        if (score > maxScore) {
            $(input).val(maxScore);
            score = maxScore;
            winui.window.msg('评分不能超过题目满分', {icon: 2});
        }
        
        // 实时上传评分e {
        AjaxPostUtil.request({
            url: schoolBasePath + "writeExamSurveyQuAnswer",
            params: {ttom: 8px;
                quId: questionId,
                belongAnswerId: id,
                surveyId: surveyId,
                fraction: score
            },nt-size: 14px;
            type: 'json',
            method: 'POST',
            callback: function (json) {
                if (json.code === 200) {
                    winui.window.msg('评分已保存', {icon: 1});
                } else {
                    winui.window.msg(json.message, {icon: 2, time: 2000});
                }ay: inline-flex;
            }lign-items: center;
        }); gap: 4px;
    }       margin-left: 8px;
        }
    // 提交按钮事件
    $("#submit").on('click', function() {
        var questions = $("#questionList .question-item");
        var unscoredQuestions = questions.filter(function() {
            return $(this).find('.score-input').val() === '';
        });
        .star-empty {
        if (unscoredQuestions.length > 0) {
            winui.window.msg('还有题目未评分，请完成所有题目的评分后再提交', {icon: 2});
            return;
        }
        .score-number {
        // 批量提交所有题目分数ft: 8px;
        var submitPromises = questions.map(function() {
            var $input = $(this).find('.score-input');
            return new Promise(function(resolve) {
                AjaxPostUtil.request({
                    url: schoolBasePath + "writeExamSurveyQuAnswer",
                    params: {
                        quId: $input.data('question-id'),
                        belongAnswerId: id,
                        surveyId: surveyId,
                        fraction: parseFloat($input.val()) || 0
                    },
                    type: 'json',
                    method: 'POST',
                    callback: function(json) {
                        resolve(json);
                    }: wrap;
                });
            });
        });yui-input.score-input {
            width: 100px;
        Promise.all(submitPromises).then(function() {
            // 提交整体数据ft: 8px;
            AjaxPostUtil.request({
                url: schoolBasePath + "writeExamSurveyAnswer",
                params: {
                    id: id,
                    quNum: questions.length,
                    surveyId: surveyId,
                    state: 2,px;
                    handleState: 1
                },ize: 14px;
                type: 'json',
                method: 'POST',
                callback: function(json) {
                    if (json.code === 200) {
                        winui.window.msg('评分提交成功', {icon: 1});
                        layer.closeAll();
                    } else {
                        winui.window.msg(json.message, {icon: 2, time: 2000});
                    }16px;
                }r-radius: 8px;
            });gin-bottom: 16px;
        });
    });
        .student-answer {
    // 取消按钮事件olor: #2c3e50;
    $("#cancel").on('click', function() {
        layer.closeAll();
    }); .exam-actions {
            margin-top: 24px;
    // 初始化  text-align: right;
    getExamInfo();g-top: 16px;
            border-top: 1px solid #edf2f7;
    exports('marking', {});
});
        .exam-actions button {
            margin-left: 12px;
        }

        /* 使用 winui 图标样式 */
        .icon-pencil:before {
            content: "\e600";
            font-family: "winui";
        }

        .icon-star:before {
            content: "\e601";
            font-family: "winui";
        }

        .icon-star-empty:before {
            content: "\e602";
            font-family: "winui";
        }

        /* 添加无数据状态样式 */
        .no-data {
            text-align: center;
            padding: 40px 0;
            color: #999;
            font-size: 16px;
            background: #f8f9fa;
            border-radius: 8px;
            margin: 20px 0;
        }

        /* 错误消息样式 */
        .error-message {
            color: #ff4d4f;
            background: #fff2f0;
            border: 1px solid #ffccc7;
            padding: 12px 16px;
            border-radius: 4px;
            margin: 16px 0;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .error-message i {
            font-size: 18px;
        }

        /* 加载状态样式 */
        .loading-state {
            text-align: center;
            padding: 40px 0;
            color: #666;
        }

        .loading-state .layui-icon {
            font-size: 24px;
            margin-right: 8px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
<div class="container-manage">
    <!-- 试卷标题和学号 -->
    <div class="schedule-title">
        <h2 id="examTitle">试卷标题</h2>
        <span id="studentId">学号：</span>
    </div>

    <!-- 动态生成的问题列表 -->
    <div id="questionList">
        <!-- 问题将通过 JavaScript 动态生成 -->
    </div>

    <!-- 操作按钮 -->
    <div class="exam-actions">
        <button class="layui-btn layui-btn-primary" id="cancel">取消</button>
        <button class="layui-btn" id="submit">提交</button>
    </div>
</div>

<!-- 引入 Layui 和其他依赖脚本 -->
<script src="../../assets/lib/layui/layui.js"></script>
<script src="../../assets/lib/layui/custom.js"></script>
<script type="text/javascript">
    layui.config({base: '../../js/myschooltask/'}).use('marking');
</script>
</body>
</html>